<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }

        .bubble {
            width: 70px;
            height: 70px;
            line-height: 1;
            display: inline-block;
            position: absolute;
            border-radius: 100%;
            background-color: rgba(12, 181, 106, 0.9);
            color: #fff;
            border: 2px solid rgba(255, 255, 255, 0.8);
            text-align: center;
            cursor: pointer;
        }

        .BMapLabel {
            border: none !important;
            background-color: transparent !important;
        }

        #house {
            height: 300px;
            width: 100%;
            position: fixed;
            bottom: -400px;
            left: 0;
            transition: all 1s;
            border: 1px solid red;
        }

        #house.show {
            bottom: 0;
        }
    </style>
    <!--  1.0 导入地图js -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=SeUxB6PBUamb8yEP3e463NCIivu7PO70">
    </script>

</head>

<body>
    <div id="map">

    </div>
    <div id="house">

    </div>

    <script>
        // 百度地图API功能
        var map = new BMap.Map("map");
        // 给地图对象添加一个事件
        map.addEventListener('movestart', function () {
            alert('地图开始移动了');
        })

        var point = new BMap.Point(116.417854, 39.921988);
        map.centerAndZoom(point, 15);

        // 创建label对象（文本覆盖物）并添加到地图上
        var opts = {
            position: point,    // 指定文本标注所在的地理位置
            offset: new BMap.Size(30, -30)    //设置文本偏移量
        }
        var label = new BMap.Label("欢迎使用百度地图，这是一个简单的文本标注哦~", opts);  // 创建文本标注对象
        label.setStyle({
            color: "red",
            fontSize: "12px",
            height: "20px",
            lineHeight: "20px",
            fontFamily: "微软雅黑"
        });
        // 给label设定自定义html结合和样式
        label.setContent(`
        <div class="bubble">
            <p class="name">天河</p>
            <p>100套</p>
        </div>
        `)

        // 给文本覆盖物对象添加一个click事件(使用addEventListener方式注册click事件)
        label.addEventListener('click', function () {
            // alert('地图标记物的点击事件被触发');
            let divObj = document.querySelector('#house');
            divObj.setAttribute('class', 'show')
        })

        // 添加到地图
        map.addOverlay(label);

    </script>

</body>

</html>